<!DOCTYPE html>
<html lang="en">
<!--
See https://github.com/AnalyticalGraphicsInc/cesium-google-earth-examples/blob/master/LICENSE.md

Original Work:

Copyright 2009 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.


-->
<head>
    <title>Cesium API Sample - Interactive KML Loading</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="static/codemirror.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.3.2-dist/css/bootstrap.cerylean.min.css">
    <link rel="stylesheet" href="static/examples.css">
    <script src="static/codemirror-compressed.js"></script>
    <script src="static/helpers.js"></script>
    <script src="../Cesium/Cesium.js"></script>
    <script src="static/jquery-2.1.3.min.js"></script>
    <script src="static/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>

<body onresize="onResize()">
<header class="container">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button class="btn btn-primary navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </button>
            <a class="navbar-brand" href="http://cesiumjs.org" target="_blank"><img src="static/Cesium_Logo_forDarkBackground.png" /></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#" id="menuPreview" onclick="showPanel(this)">Show Preview</a></li>
                <li><a href="#" id="menuCesium" onclick="showPanel(this)">Show Cesium Code</a></li>
                <li><a href="#" id="menuGoogle" onclick="showPanel(this)">Show Google Earth Code</a></li>
                <li><a href="http://cesiumjs.org/for-google-earth-developers.html" target="_blank">For Google Earth Developers</a></li>
                <li><a href="../index.html" target="_blank">All Google Earth examples</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Additional Resources <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://cesiumjs.org/tutorials.html" target="_blank">Tutorials</a></li>
                        <li><a href="http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html" target="_blank">Cesium Sandcastle</a></li>
                        <li> <a href="http://cesiumjs.org/refdoc.html" target="_blank">Reference Documentation</a> </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</header>
<div id="preview">
    <div id="previewContent">
        <form action="#" method="get" onsubmit="return false;">
            <input id="kmlUrl"
                   type="text" size="50"
                   value="../sampleData/kml/MaineScubaDiving.kml"/>
            <input type="submit" onclick="onLoadKml()" value="Fetch KML!"/>
            <span id="errorMessage" class="text-danger"></span>
        </form>
        <div id="cesiumContainer"></div>
    </div>
</div>
<div id="code">
    <div class="panel panel-primary" id="czmPanel">
        <div class="panel-heading">Relevant Cesium Source</div>
        <div class="panel-body">
            <textarea id="cesiumSource"></textarea>
        </div>
    </div>
    <div class="panel panel-primary" id="gePanel">
        <div class="panel-heading">Relevant Google Earth Source (<a target="_blank" href="https://code.google.com/p/earth-api-samples/source/browse/trunk/examples/hittest.html">link</a>)</div>
        <div class="panel-body">
                <textarea id="gesource">
                    var currentKmlObject = null;

                    function fetchKmlFromInput() {
                        // remove the old KML object if it exists
                        if (currentKmlObject) {
                            ge.getFeatures().removeChild(currentKmlObject);
                            currentKmlObject = null;
                        }

                        var kmlUrlBox = document.getElementById('kml-url');
                        var kmlUrl = kmlUrlBox.value;

                        google.earth.fetchKml(ge, kmlUrl, finishFetchKml);
                    }

                    function finishFetchKml(kmlObject) {
                        // check if the KML was fetched properly
                        if (kmlObject) {
                            // add the fetched KML to Earth
                            currentKmlObject = kmlObject;
                            ge.getFeatures().appendChild(currentKmlObject);
                        } else {
                            // wrap alerts in API callbacks and event handlers
                            // in a setTimeout to prevent deadlock in some browsers
                            setTimeout(function() {
                                alert('Bad or null KML.');
                            }, 0);
                        }
                    }
                </textarea>
        </div>
    </div>
</div>
<script>
	Cesium.BingMapsApi.defaultKey = 'AgH8JB-gA1Wo9ZbGL9oCEqfD-4YAkMnMp_XzzoGbynt_CC6l27GFWqN8SJaYm6aC';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        fullscreenElement: 'previewContent',
        selectionIndicator: false,
        infoBox: false
    });

    var kmlInput = document.getElementById('kmlUrl');
    var errorMsg = document.getElementById('errorMessage');

    function onLoadKml() {
        //Remove previous entities
        viewer.entities.removeAll();
        errorMsg.innerHTML = '';

        //Load the KML object
        viewer.dataSources
            .add(Cesium.KmlDataSource.load(kmlInput.value, {
                camera: viewer.camera,
                canvas: viewer.canvas
            }))
            .then( function (kmlData) {
                viewer.flyTo(kmlData.entities);
            }, function (error) {
                errorMsg.innerHTML = error + ': Bad or null KML.';
                // failure is often a result of CORS Security Policies
                // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
            });
    }

    function relevantSource() {
          var kmlInput = document.getElementById('kmlUrl');
          var errorMsg = document.getElementById('errorMessage');
//
//        function onLoadKml() {
//            //Remove previous KML entities
//            viewer.entities.removeAll();
//
//            //Load the KML object
//            viewer.dataSources.add(
//                Cesium.KmlDataSource.load(kmlInput.value, {
//                    camera: viewer.camera,
//                    canvas: viewer.canvas
//                }))
//
//                //Use Promise to Handle Callbacks
//                .then(
//                    function (kmlData) { //success
//                        viewer.flyTo(kmlData.entities);
//                    },
//                    function (error) { //failure
//                        errorMsg.innerHTML = error + ': Bad or null KML.';
//                        // failure is often a result of CORS Security Policies
//                        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
//                    }
//                );
//        }
    }

//    relevantSource();
    showSource('cesiumSource', relevantSource);

</script>
</body>
</html>